<template>
  <div class="blackOrWhite">
    <div class="cHeader">
      <i class="iconfont icon-fanhui noClick" @click="$router.go(-1)"></i>
      <p>{{commentObj.comments.length + commentObj.commentsTwo.length}}条评论</p>
      <i></i>
    </div>
    <div style="height:.5rem"></div>
    <ul class="cContent" v-for="(obj,index) in commentObj" :key="index">
      <li v-for="item in obj" :key="item.id">
        <!-- 弹出 -->
        <div class="operation" v-if="displayFlag == item.id">
          <p @click="copyFn(item.content)">复&nbsp;&nbsp;&nbsp;&nbsp;制</p>
          <p @click="reportFn">举&nbsp;&nbsp;&nbsp;&nbsp;报</p>
        </div>
        <img :src="item.avatar" alt />
        <div class="commentContent">
          <p class="contentTop">
            <span class="userName">{{item.author}}</span>
            <span class="userName" @click="isOperation(item.id)">...</span>
          </p>
          <p class="commentVal">{{item.content}}</p>
          <p>
            <span class="cTime">{{item.time|timeFn}}</span>
          </p>
        </div>
      </li>
    </ul>
    <p class="commentOver">已显示全部评论</p>
    <van-cell class="addcomment" @click="showPopup">说说你的评论。。。</van-cell>
    <van-popup v-model="show" position="bottom">
      <div class="addcommentValBox">
        <textarea
          name
          placeholder="评论千万条，友善第一条"
          id
          cols="30"
          v-model="commentString"
          style="resize: none;"
          rows="10"
        ></textarea>
        <van-button @click="addcomments" type="info" size="small">确定</van-button>
      </div>
    </van-popup>
    <input id="copeBox" ref="copeBox" v-model="copeVal" />
  </div>
</template>

<script>
import { Notify, Toast } from "vant";
import { mapState, mapActions } from "vuex";
import { getcomments, getcommentsShort } from "@/util/commentAjax.js";
export default {
  name: "Comment",
  data: function() {
    return {
      id: "",
      commentObj: {
        comments: [],
        commentsTwo: []
      },
      show: false,
      displayFlag: 0,
      copeVal: "",
      commentString: ""
    };
  },
  filters: {
    timeFn(val) {
      var now = new Date(val * 1000);
      var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = now.getDate(); //返回日期月份中的天数（1到31）
      var hour = now.getHours(); //返回日期中的小时数（0到23）
      var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
      return `${month}-${date} ${hour}:${minute}`;
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getcommentsFn();
    this.getcommentsShortFn();
  },
  computed: {
    ...mapState("login", ["isLogin", "user"])
  },
  methods: {
    getcommentsShortFn() {
      let that = this;
      getcommentsShort(that.id).then(res => {
        that.commentObj.commentsTwo = res.comments;
      });
    },
    showPopup() {
      if (this.isLogin) {
        this.show = true;
      } else {
        Notify({
          type: "primary",
          message: "请先登录",
          duration: 1500
        });
      }
    },
    getcommentsFn() {
      let that = this;
      getcomments(that.id).then(res => {
        that.commentObj.comments = res.comments;
      });
    },
    isOperation(num) {
      //显示举报和复制
      this.displayFlag = num;
    },
    copyFn(str) {
      //复制
      this.copeVal = str;
      let copeTxt = this.$refs.copeBox;
      this.$nextTick(() => {
        copeTxt.select(); // 选择对象
        document.execCommand("Copy");
      });
      this.displayFlag = 0;
      this.$notify({ type: "primary", message: "复制成功" });
      return
    },
    reportFn() {
      //举报
      let that = this;
      that.$dialog
        .confirm({
          message: "是否举报本次回答？"
        })
        .then(() => {
          // on confirm
          that.displayFlag = 0;
          this.$notify({ type: "primary", message: "举报成功" });
        })
        .catch(() => {
          // on cancel
          that.displayFlag = 0;
        });
    },
    //新增评论
    addcomments() {
      let that = this;
      if (that.commentString.trim() == "") {
        Toast("请输入评论");
      } else {
        that.commentObj.commentsTwo.unshift({
          author: that.user.name,
          avatar: that.user.userImg,
          time: Date.parse(new Date()) / 1000,
          content: that.commentString
        });
        that.commentString = "";
        that.show = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cHeader {
  height: 0.5rem;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  background: #fff;
  z-index: 999;
  border-bottom: 1px solid #eee;
  .noClick {
    font-size: 0.28rem;
    color: #333;
    width: 0.4rem;
    font-weight: 700;
  }
  p {
    flex: 1;
    font-size: 0.2rem;
    text-align: center;
    font-weight: 700;
  }
}
.cContent {
  li {
    display: flex;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 0.1rem;

    .operation {
      position: absolute;
      background: #fff;
      font-size: 0.12rem;
      box-shadow: 0 0 0.05rem #ccc;
      right: 0.1rem;
      // z-index: 9999;
      p {
        padding: 0.02rem 0.25rem;
      }
    }
    img {
      width: 0.35rem;
      height: 0.35rem;
      border-radius: 50%;
      border: 1px solid #eee;
    }
    .commentContent {
      flex: 1;
      .contentTop {
        display: flex;
        justify-content: space-between;
        margin: 0 0.1rem;
        .userName {
          font-size: 0.14rem !important;
          font-weight: 700;
        }
        .userName:nth-child(2) {
          color: #ccc;
        }
      }
      .commentVal {
        margin: 0.1rem;
        font-size: 0.14rem;
        line-height: 0.24rem;
      }
      .cTime {
        font-size: 0.12rem;
        color: #aaa;
        margin: 0.1rem;
      }
    }
  }
}
.commentOver {
  font-size: 0.2rem;
  color: #ccc;
  padding: 0.11rem 0 0.4rem 0;
  text-align: center;
}
#copeBox {
  height: 0;
  border: 0;
}
.addcomment {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  color: #333;
  background: #eee;
  padding: 0.1rem;
}
.addcommentValBox {
  display: flex;
  padding: 0.1rem;
  flex-direction: column;
  textarea {
    flex: 1;
    border: 0;
  }
  button {
    width: 0.6rem;
    height: 0.3rem;
    font-size: 0.4rem;
    justify-self: right;
  }
}
</style>